<template>
    <div class="songs-box">
        <div class="songs-title">
        <span class="songs-title-left">发现好歌单</span>
        <span><van-button color="black" round plain class="songs-title-right" size="mini" >查看更多</van-button></span>
       </div> 
       <div class="songs-swiper">
        <van-swipe :show-indicators="false" :loop="false" :width="110">
  <van-swipe-item v-for="(item,index) in state.songsList" :key="item.id">
  <router-link :to="{path:`/songsview/${item.id}`}">
  <div class="img-box">
  <img :src="item.picUrl" >
  <span class="img-icon">
    <van-icon name="play-circle-o" />{{getNum(item.playCount)}}
  </span>
  </div>
    <div class="songs-name">{{item.name}}</div>
    </router-link>
  </van-swipe-item>
 
</van-swipe>
       </div>
    </div>
</template>


<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import {getSongsList} from '@/utils/api.js'
import {reactive}from "vue"


export default defineComponent({
setup() {
const state=reactive({
    songsList:[]
})
onMounted(async()=>{
    try{
const response =await getSongsList({limit:10})
console.log(response)
if(response.data.result&&response.data.code==200){
    state.songsList=response.data.result
    sessionStorage.setItem("playDetail",JSON.stringify(state))
}
    }
    catch(err){
        console.log(err)
    }
   
    
})

 function getNum(num){
        if(num&&num/10000>10){
            return Math.floor(num/10000)+"万"
        }
        else{
            return num
        }
    }
return {

getNum,

state,
};
},
});
</script>


<style lang="less" scoped>
    .songs-box{
        padding: 0.1rem;
        overflow: hidden;
        .songs-title{
            width: 100%;
            height: 0.7rem;
            overflow: hidden;
            position: relative;
            .songs-title-left{
                position: absolute;
                top: 0.1rem;
                left: 0.1rem;
                font-weight: bold;
                font-size: 0.3rem;
            }
            .songs-title-right{

                position: absolute;
                top: 0.1rem;
                right: 0.1rem;
               
               
            }
        }
        .songs-swiper{
            width: 100%;
            .van-swipe{
                .van-swipe__track{
                .van-swipe-item{
                   .img-box{
                    height: 2rem;
                    position: relative;
                    .img-icon{
                         background-color:rgba(0,0,0,0.2); 
                         font-size: 0.1rem;
                        border-radius: 0.2rem;
                        color: white;
                        font-size: small;
                        position: absolute;
                        top: 0.1rem;
                        right:0.1rem
                    }
                   }
                    img{
                        width: 2rem;
                        height: 2rem;
                        border-radius: 0.2rem;
                    }
                    div{
                        width: 2rem;
                       height: 1rem;
                       font-size: small;
                       color: black;
                    }
                }
                }
            }
        }
    }
</style>